<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/sandbox.css">
</head>
<body>
<div class="sandbox">
    <div class="left">
        <div class="chart">
            <ul>
                <li>
                    监测点位总数：56    在线：53   离线：2
                </li>
                <li>风速传感器总数：56

                </li>
                <li>方向传感器总数：56

                </li>
                <li>空气温度传感器总数：50

                </li>
                <li>
                    空气湿度传感器总数：50


                </li>
                <li>二氧化碳含量传感器总数：25

                </li>
                <li>光照传感器总数：39

                </li>
                <li>土壤温度传感器总数：50

                </li>
            </ul>
        </div>

        <div class="chart">

        </div>
        <div class="chart" id="c2"></div>
    </div>
    <div class="main" id="mc"></div>
    <div class="right">
        <div></div>
        <div class="chart">
            <ul>
                <li>未来24小时天气

                </li>
                <li>温度：10-19摄氏度

                </li>
                <li>风向：东南风  2-4级

                </li>
                <li>多云有小雨

                </li>
            </ul>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>
<script></script>

<script>
    $(function () {
        return;
        function makeChart(el) {
            var myChart = echarts.init(document.getElementById(el));
            var option = {
                title: false,
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: false,
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        label: false,
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 1548, name: '搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }

        makeChart('c1');
        makeChart('c2');

        $.get('./map.json', function (data) {
            echarts.registerMap('c-map', data);
            var myChart = echarts.init(document.getElementById('mc'));
            var option = {
                title: {
                    text: '环境监测',
                    textStyle: {
                        width: '100%',
                        align: 'center',
                        color: '#fff'
                    },
                    padding: 20,
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: false,
                series: [
                    {
                        name: 'myMap',
                        type: 'map',
                        roam: true,
                        map: 'c-map'       //使用
                    }
                ]
            };
            myChart.setOption(option);
        });
        $('.type-list span').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        });
        document.addEventListener('mousemove', function (e) {
            document.body.style.backgroundPositionX = (e.clientX - window.innerWidth / 2) / 100 + 'px';
            document.body.style.backgroundPositionY = (e.clientY - window.innerHeight / 2) / 100 + 'px';
        })
    })
</script>
</body>
</html>